import { useState } from 'react'
import { Input, Button, Toast } from 'antd-mobile'
import { updatePsw } from '@api'
import { useNavigate } from 'react-router-dom'
import CryptoJS from 'crypto-js'
import './index.scss'

const LoginForm = () => {
    const navigate = useNavigate()

    const [pass, setPass] = useState('')
    const [pass2, setPass2] = useState('')
    const submit = () => {
        updatePsw({ newPassword: CryptoJS.MD5(pass2).toString(), oldPassword: CryptoJS.MD5(pass).toString() }).then(({ success, data, info }) => {
            if (success) {
                Toast.show({
                    content: '修改成功~'
                })
                navigate('/')
            } else {
                Toast.show({
                    content: info
                })
            }
        })
    }
    return (
        <div className="Login">
            <h1>修改密码</h1>
            <div className="Login_container">
                <p>旧密码</p>
                <div className="inp_box">
                    <Input onChange={(e) => setPass(e)} value={pass} placeholder="请输入旧密码" clearable />
                </div>
                <p>新密码</p>
                <div className="inp_box">
                    <Input onChange={(e) => setPass2(e)} value={pass2} placeholder="请输入新密码" clearable />
                </div>
                <Button onClick={submit} className="btn" color="primary">
                    确认修改
                </Button>
            </div>
        </div>
    )
}

export default LoginForm
